<template>
  <div class="app-container">
    <div class="main-container">
      <div class="page-header">
        <div class="header-left">
          <router-link to="/main/renshi/zhaoping/zhaopingxiudin" class="back-btn">
            <i class="el-icon-arrow-left"></i> 返回
          </router-link>
        </div>
        <div class="header-center">
          <h2 class="title">深圳市艾美思普科技有限公司</h2>
        </div>
        <div class="header-right">
          <template v-if="!isView">
            <el-button-group>
              <el-button type="primary" icon="el-icon-plus" @click="addForm">新增</el-button>
              <el-button type="success" icon="el-icon-check" @click="saveData">保存</el-button>
              <el-button type="warning" icon="el-icon-view" @click="goToList">列表</el-button>  
            </el-button-group>
          </template>
        </div>
      </div>

      <div class="content-wrapper">
        <el-card class="form-card" shadow="hover">
          <div class="card-title">
            <span class="title-text">表单管制总览表</span>
          </div>
          
          <el-table
            :data="formList"
            border
            stripe
            style="width: 100%"
            :header-cell-style="tableHeaderStyle"
            :cell-style="tableCellStyle"
          >
            <el-table-column label="序号" type="index" width="80" align="center">
            </el-table-column>
            <el-table-column label="表单编号" align="center" min-width="150">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.formNumber" 
                  :disabled="isView"
                  placeholder="请输入表单编号"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="表单名称" align="center" min-width="200">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.formName" 
                  :disabled="isView"
                  placeholder="请输入表单名称"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="制作部门" align="center" min-width="150">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.productionDepartment" 
                  :disabled="isView"
                  placeholder="请输入制作部门"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="版本" align="center" min-width="120">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.formVersion" 
                  :disabled="isView"
                  placeholder="请输入版本"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" min-width="200">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.remarks" 
                  :disabled="isView"
                  placeholder="请输入备注"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column v-if="!isView" label="操作" align="center" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button 
                  type="danger" 
                  icon="el-icon-delete" 
                  size="mini"
                  circle
                  @click.prevent="deleteForm(scope.$index)">
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="form-footer">
            <div class="footer-info">
              <el-divider></el-divider>
              <div class="info-row">
                <span class="info-item">表单编号及版本： AM-FR-0002 A/0</span>
                <span class="info-item">生效日期：2006年 11月 1日</span>
                <span class="info-item">保存年限：长期</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getFormControlById, batchSaveFormControl } from '@/api/form'

export default {
  data() {
    return {
      id: undefined,
      isView: false,
      formList: [
        {
          formNumber: '',
          formName: '',
          productionDepartment: '',
          formVersion: '',
          remarks: ''
        }
      ],
      tableHeaderStyle: {
        background: '#f5f7fa',
        color: '#303133',
        fontWeight: '600',
        height: '50px',
        padding: '0',
        textAlign: 'center'
      },
      tableCellStyle: {
        padding: '8px 0',
        textAlign: 'center'
      }
    }
  },
  created() {
    const { id, type } = this.$route.query
    if (id) {
      this.id = id
      this.isView = type === 'view'
      this.getDetail()
    }
  },
  methods: {
    async getDetail() {
      try {
        const response = await getFormControlById(this.id)
        if (response.data) {
          this.formList = [response.data]
        }
      } catch (error) {
        console.error('获取详情失败', error)
      }
    },
    addForm() {
      this.formList.push({
        formNumber: '',
        formName: '',
        productionDepartment: '',
        formVersion: '',
        remarks: ''
      })
    },
    deleteForm(index) {
      if (this.formList.length === 1) {
        this.$message.warning('至少保留一条记录')
        return
      }
      this.formList.splice(index, 1)
    },
    goToList() {
      this.$router.push('/main/biao/biaodanzlList')
    },
    async saveData() {
      if (!this.formList.length) {
        this.$message.error('至少需要一条记录')
        return
      }

      if (this.formList.some(form => !form.formNumber || !form.formName || !form.productionDepartment || !form.formVersion)) {
        this.$message.error('表单编号、名称、制作部门和版本不能为空')
        return
      }

      try {
        await batchSaveFormControl(this.formList)
        this.$message.success('保存成功')
        this.$router.push('/main/biao/biaodanzlList')
      } catch (error) {
        console.error('保存失败', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: antiquewhite;
  min-height: 100vh;
}

.main-container {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background-color: #fff;
  padding: 16px 24px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .header-left, .header-right {
    min-width: 150px;
  }

  .header-center {
    flex: 1;
    text-align: center;
  }

  .title {
    margin: 0;
    color: #303133;
    font-size: 20px;
    font-weight: 600;
  }
}

.back-btn {
  text-decoration: none;
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
  
  &:hover {
    color: #409EFF;
  }

  i {
    margin-right: 4px;
  }
}

.content-wrapper {
  background-color: transparent;
}

.form-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .card-title {
    padding: 15px 0;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid #ebeef5;

    .title-text {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }
}

.form-footer {
  margin-top: 30px;

  .footer-info {
    .info-row {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
    }

    .info-item {
      color: #606266;
      font-size: 14px;
    }
  }
}

:deep(.el-table) {
  border-radius: 4px;
  margin-bottom: 20px;

  &::before {
    display: none;
  }

  .el-table__header-wrapper {
    border-radius: 4px 4px 0 0;
  }

  .el-input {
    width: 100%;
  }
}

:deep(.el-button) {
  padding: 9px 15px;

  &.el-button--mini {
    padding: 7px 12px;
  }

  [class*="el-icon-"] + span {
    margin-left: 4px;
  }
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-divider) {
  margin: 20px 0;
}
</style>